<template>
	<view style="background: rgba(102,102,102,0.04);border-radius: 16rpx;padding: 20rpx;width: 175rpx;">
		<view class="u-flex u-row-left">
			<image :src="tab.icon" style="width: 28rpx;height: 28rpx;" />
			<view style="color: #999999;font-size: 22rpx;margin-left: 20rpx;">{{tab.title}}</view>
		</view>
		<view style="line-height: 58rpx;"><text style="color: #333333;font-size: 36rpx;">{{tab.num}}</text><text
				style="color: #333333;font-size: 20rpx;margin-left: 10rpx;">{{tab.unit}}</text></view>
		<view>
			<text style="color: #999999;font-size: 20rpx;">环比</text>
			<text style="font-size: 20rpx;margin-left: 10rpx;margin-right: 10rpx;"
				:class="{'t':tab.type==0,'t1':tab.type==1}">{{tab.ratio}}%</text>
			<image v-if="tab.type==0" src="../static/images/up.png" style="width:16rpx;height:16rpx" />
			<image v-else src="../static/images/down.png" style="width:16rpx;height:16rpx" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "infoTab",
		props: {
			tab: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.t {
		color: #FF4141;
	}

	.t1 {
		color: #1ABD00;
	}
</style>